<style lang="scss" scoped>
.flow-contextmenu {
    min-width: 150px;
    max-height: 120px;
    position: fixed;
    user-select: none;
    z-index: 99;

    ::v-deep .el-cascader-menu {
        min-width: auto;

        .el-cascader-node {
            z-index: 10;
            margin-right: 10px;
            //padding-right: 12px;
            //padding-left: 14px;
        }
    }

    .flow-contextmenu__node {
        display: inline-block;
        min-width: 60px;
    }
}
</style>
<template>
    <el-card
        class="flow-contextmenu"
        ref="flowMenu"
        v-show="visible"
        :style="menuStyle"
    >
        <el-cascader-panel
            :props="props"
            :options="clickedOptions"
            :border="false"
            v-model="select"
            @change="handleMenuClick"
        >
            <template v-slot="{ node, data }">
                <span v-if="clickedNodeId === node.data.value" class="flow-contextmenu__node">{{
                        data.label
                    }}</span>
            </template>
        </el-cascader-panel>
    </el-card>
</template>

<script>
export default {
    name: "FlowContentMenu",
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        position: {
            type: Object,
            default: () => ({})
        },
        clickedNodeId: {
            type: String,
            default: ''
        }
    },
    computed: {
        menuStyle() {
            return {
                ...this.position
            }
        }
    },
    watch: {
        visible: {
            handler() {
                this.select = []
            }
        },
        clickedNodeId: {
            handler(val) {
                this.clickedOptions = this.options.filter(item => item.value === val || item.value === 'remove')
            }
        }
    },
    data() {
        return {
            select: [],
            options: [
                {
                    value: 'input',
                    label: '操作'
                },
                {
                    value: 'output',
                    label: '操作'
                },
                {
                    value: 'filterOpera',
                    label: '操作'
                },
                {
                    value: 'default',
                    label: '操作'
                },
                {
                    value: 'attrs',
                    label: '操作'
                },
                {
                    value: 'standard',
                    label: '操作'
                },
                {
                    value: 'deduplication',
                    label: '操作'
                },
                {
                    value: 'pca',
                    label: '操作'
                },
                {
                    value: 'remove',
                    label: '删除'
                },
            ],
            clickedOptions: [],
            props: {}
        }
    },
    methods: {
        handleMenuClick(action) {
            this.$emit('onMenuClick', action)
            this.$emit('update:visible', false)
        }
    }
}
</script>


